<template>
    <div  class="dept-container">
        <el-button type="primary" @click.native="vueCreate">创建部门</el-button>
        <el-button type="primary" @click.native="vueCreate">导入Excel</el-button>
        <el-button type="primary" @click.native="vueCreate">导出Excel</el-button>
        <deptinfo :dialogFormVisible="dialogFormVisible" :empList="empList" :updateOrCreate="updateOrCreate" :editDeptInfo="editDeptInfo" />
        <el-table
            :data="deptList"
            style="width: 100%"
        >
            <el-table-column
                prop="fdid"
                label="系统内部ID"
                width="200" 
                />
            <el-table-column
                prop="fdname"
                label="部门名称"
                width="200"
                />
            <el-table-column
                prop="fename"
                label="部长名称"
                width="200"
                />
            <el-table-column
                prop="fdmemo"
                label="备注"
                width="300"
                />
            <el-table-column>
                <template slot-scope="scope">
                    <el-button type="primary" size="big" @click="vueDelete(scope.row.fdid)">删除</el-button>
                    <el-button type="primary" size="big"  @click="vueEdit(scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 50, 100, 200]"
        :page-size="10"
        layout="total, sizes, prev, pager, next, jumper"
        :total="200">
      </el-pagination>
    </div>
</template>
<script>
import { getDeptList,deleteDept } from '@/api/dept'
import { getEmpList } from '@/api/emp'
import deptinfo from '@/views/system/dept/components/DeptInfo'

export default {
    components: {
        deptinfo
    },
    data () {
        return {
            deptList: {},
            empList: {},
            dialogFormVisible: false,
            /*true 代表更新，false代表创建*/
            updateOrCreate: false,
            editDeptInfo: {},
        }
    },
    created() {
        this.initGetDeptList()
    },
    methods: {
        initGetDeptList() {
            getDeptList().then(response => {
                this.deptList = response.data.deptList
            })
            getEmpList().then(response => {
              this.empList = response.data.empList
          })
        },
        vueCreate() {
            this.dialogFormVisible=true
            this.updateOrCreate=false
        },
        vueEdit(row) {
            this.dialogFormVisible=true
            this.updateOrCreate=true
            this.editDeptInfo=row
        },
        vueReset() {
            this.dialogFormVisible=false
            this.updateOrCreate=false
            this.editDeptInfo={}
        },
        vueDelete(id) {
            this.$confirm('此操作将永久删除，受否继续？','提示',{
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                deleteDept(id).then(response => {
                    this.initGetDeptList()
                    this.$message({
                        type: 'success',
                        message: '删除成功'
                    })
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                })
            })
        }
    }

}
</script>
<style lang="scss" scoped>
    .dept-container {
      margin: 10px 50px 0;
      overflow: hidden;
    }
</style>